import React, { useContext, useState } from "react";

import {
  StyleSheet,
  ScrollView,
  Text,
  View,
  Modal,
  TouchableWithoutFeedback,
  TouchableOpacity,
  Image,
  Dimensions,
} from "react-native";
import Dropdown from "./dropdown";
import QuestionnaireContext from "../context/questionnaire/QuestionnaireContext";

import { AntDesign } from "@expo/vector-icons";

// 0：不跳过，1：且跳过，2：或跳过，3：否跳过，4：特殊且跳过(关联题目)，5：小于跳过，6：大于跳过
const SetSkip = ({
  quesType,
  options,
  skipType,
  relation,
  skipDetail,
  setSkipType,
  setRelation,
  setSkipDetail,
  handleSkip,
}) => {
  const { QuesData } = useContext(QuestionnaireContext);
  // console.log("skipType---", skipType);
  // console.log("skipDetail---", skipDetail);
  // console.log("skipDetail---", skipDetail);

  const [t_skipType, setT_SkipType] = useState(skipType);

  let t_isSkip = [],
    t_relation = [];
  for (let i = 0; i < QuesData.body.length; i++) {
    let contents = [];
    for (let j = 0; j < QuesData.body[i].contents.length; j++) {
      let title = [];
      for (let k = 0; k < QuesData.body[i].contents[j].title.length; k++) {
        title.push({ isSkip: false });
      }
      contents.push({ isSkip: false, title: title });
    }
    t_isSkip.push({ isSkip: false, contents: contents });
  }
  t_relation = JSON.parse(JSON.stringify(t_isSkip));
  if (t_skipType != 0) {
    // console.log("skipDetail---", skipDetail);
    for (let i = 0; i < skipDetail[0].skipNumber.length; i++) {
      let num = skipDetail[0].skipNumber[i];
      console.log("num---", num);
      if (num.length == 1) {
        t_isSkip[num[0]].isSkip = true;
      } else if (num.length == 2) {
        t_isSkip[num[0]].contents[num[1]].isSkip = true;
      } else if (num.length == 3) {
        t_isSkip[num[0]].contents[num[1]].title[num[2]].isSkip = true;
      }
    }
  }
  const [SkipArr, setSkipArr] = useState(t_isSkip);
  if (t_skipType != 0) {
    for (let i = 0; i < relation.length; i++) {
      let num = relation[i];
      if (num.length == 1) {
        t_relation[num[0]].isSkip = true;
      } else if (num.length == 2) {
        t_relation[num[0]].contents[num[1]].isSkip = true;
      } else if (num.length == 3) {
        t_relation[num[0]].contents[num[1]].title[num[2]].isSkip = true;
      }
    }
  }
  const [relationArr, setRelationArr] = useState(t_relation);
  // console.log(SkipArr);

  let t_answer = [];
  if ((quesType == 2) | (quesType == 3)) {
    for (let i = 0; i < options.length; i++) {
      t_answer.push(false);
    }
    for (let i = 0; i < skipDetail[0].condition.length; i++) {
      let ans = skipDetail[0].condition[i];
      t_answer[ans] = true;
    }
  }
  const [con_answer, setCon_Answer] = useState(t_answer);

  const saveSkip = () => {
    // handleSkip();
    // 跳过类型

    setSkipType(t_skipType);
    // 跳过条件（答案）
    let condition = [];
    if (quesType == 2 || quesType == 3) {
      t_answer = con_answer;
      for (let i = 0; i < t_answer.length; i++) {
        if (t_answer[i]) {
          condition.push(i);
        }
      }
    }
    // 关联题目
    let s_relation = [];
    t_relation = relationArr;
    for (let i = 0; i < t_relation.length; i++) {
      if (t_relation[i].isSkip == true) {
        s_relation.push([i]);
        continue;
      }
      for (let j = 0; j < t_relation[i].contents.length; j++) {
        if (t_relation[i].contents[j].isSkip == true) {
          s_relation.push([i, j]);
          continue;
        }
      }
    }
    setRelation(s_relation);
    // 跳过题目序列
    let skipNumber = [];
    t_isSkip = SkipArr;
    for (let i = 0; i < t_isSkip.length; i++) {
      if (t_isSkip[i].isSkip == true) {
        skipNumber.push([i]);
        continue;
      }
      for (let j = 0; j < t_isSkip[i].contents.length; j++) {
        if (t_isSkip[i].contents[j].isSkip == true) {
          skipNumber.push([i, j]);
          continue;
        }
        for (let k = 0; k < t_isSkip[i].contents[j].title.length; k++) {
          if (t_isSkip[i].contents[j].title[k].isSkip == true) {
            skipNumber.push([i, j, k]);
            continue;
          }
        }
      }
    }
    let t_skipDetail = skipDetail;
    t_skipDetail[0].condition = condition;
    t_skipDetail[0].skipNumber = skipNumber;
    setSkipDetail(t_skipDetail);

    handleSkip();
  };
  return (
    <View style={styles.borderView}>
      <ScrollView style={{ height: "93%" }}>
        <View>
          <View
            style={[
              styles.optionView,
              {
                justifyContent: "space-between",
                paddingBottom: 5,
                marginTop: 5,
              },
            ]}
          >
            <View style={{ marginTop: 5 }}>
              <Text>跳过类型</Text>
            </View>
            <View
              style={{
                flexDirection: "row",
                flexWrap: "wrap",
              }}
            >
              <Dropdown
                ifFirst={1}
                initialValues={{
                  initKey: t_skipType,
                  initOptions: [
                    "不跳过",
                    "普通跳过(选[1]则跳过)",
                    "或跳过(选[1]或[2]则跳过)",
                    "否跳过(不选[1]则跳过)",
                    "关联题目(A1、A2都选[1]则跳过)",
                    "小于跳过(小于A2则跳过)",
                    "大于跳过(小于A1则跳过)",
                  ],
                }}
                initialStyles={{
                  valueWith: 200,
                  optionsWidth: 230,
                  valueFontSize: 13,
                  optionsMarginTop: 90,
                  optionsBackGroundColor: "#f1f1f1",
                  optionsBorderColor: "#ccc",
                }}
                onSelect={(item, value) => {
                  setT_SkipType(value);
                }}
              ></Dropdown>
            </View>
          </View>
          <View
            style={[
              styles.optionView,
              {
                paddingBottom: 15,
                marginTop: 0,
                flexDirection: "column",
                // backgroundColor: "#eee",
              },
            ]}
          >
            <View>
              {/* <View
                    style={{
                      alignItems: "center",
                    }}
                  >
                    <Text>{"跳过细节" + (d_index + 1)}</Text>
                  </View> */}
              {(t_skipType == 1 ||
                t_skipType == 2 ||
                t_skipType == 3 ||
                t_skipType == 4) &&
              quesType != 1 ? (
                <View>
                  <Text>跳过条件（答案）</Text>
                  <View style={{ flexDirection: "row" }}>
                    {options.map((option, o_index) => {
                      return (
                        <TouchableOpacity
                          key={o_index}
                          onPress={() => {
                            // console.log(t_answer);
                            t_answer = con_answer;
                            t_answer[o_index] = !t_answer[o_index];
                            setCon_Answer([...t_answer]);
                            // setTypeValue(index);
                            // console.log(con_answer, t_answer);
                          }}
                        >
                          <View
                            style={
                              con_answer[o_index]
                                ? styles.optionsSelected
                                : styles.optionsView
                            }
                          >
                            <Text
                              style={
                                con_answer[o_index]
                                  ? styles.textSelected
                                  : styles.optionsText
                              }
                            >
                              {"[" + (o_index + 1) + "]"}
                            </Text>
                          </View>
                        </TouchableOpacity>
                      );
                    })}
                  </View>
                </View>
              ) : null}

              {t_skipType != 0 ? (
                <View>
                  <View
                    style={{
                      flexDirection: "row",
                      justifyContent: "space-between",
                      marginRight: 15,
                      marginTop: 20,
                    }}
                  >
                    <Text>跳过题目</Text>
                    <Text>是否全选</Text>
                  </View>
                  <View>
                    {QuesData.body.map((item1, index1) => {
                      return (
                        <View key={index1}>
                          <View
                            style={{
                              flexDirection: "row",
                              justifyContent: "space-between",
                              marginRight: 15,
                            }}
                          >
                            <View
                              style={
                                SkipArr[index1].isSkip
                                  ? styles.optionsSelected
                                  : styles.optionsView
                              }
                            >
                              <Text
                                style={
                                  SkipArr[index1].isSkip
                                    ? styles.textSelected
                                    : styles.optionsText
                                }
                              >
                                {String.fromCharCode(index1 + 65) + "组"}
                              </Text>
                            </View>
                            <TouchableOpacity
                              onPress={() => {
                                t_isSkip = SkipArr;
                                t_isSkip[index1].isSkip =
                                  !t_isSkip[index1].isSkip;
                                setSkipArr([...t_isSkip]);
                              }}
                            >
                              <AntDesign
                                name="checkcircle"
                                size={19}
                                color={
                                  SkipArr[index1].isSkip ? "#41C3EE" : "#aaa"
                                }
                                style={{ marginTop: 8 }}
                              />
                            </TouchableOpacity>
                          </View>
                          {!SkipArr[index1].isSkip ? (
                            <View
                              style={{
                                flexDirection: "row",
                                flexWrap: "wrap",
                              }}
                            >
                              {item1.contents.map((item2, index2) => {
                                if (item2.type == 5) {
                                  return item2.title.map((item3, index3) => {
                                    return (
                                      <TouchableOpacity
                                        key={index3}
                                        onPress={() => {
                                          t_isSkip = SkipArr;
                                          t_isSkip[index1].contents[
                                            index2
                                          ].title[index3].isSkip =
                                            !t_isSkip[index1].contents[index2]
                                              .title[index3].isSkip;
                                          setSkipArr([...t_isSkip]);
                                        }}
                                      >
                                        <View
                                          style={
                                            SkipArr[index1].contents[index2]
                                              .title[index3].isSkip
                                              ? styles.optionsSelected
                                              : styles.optionsView
                                          }
                                        >
                                          <Text
                                            style={
                                              SkipArr[index1].contents[index2]
                                                .title[index3].isSkip
                                                ? styles.textSelected
                                                : styles.optionsText
                                            }
                                          >
                                            {String.fromCharCode(index1 + 65) +
                                              (index2 + 1) +
                                              String.fromCharCode(index3 + 97)}
                                          </Text>
                                        </View>
                                      </TouchableOpacity>
                                    );
                                  });
                                } else {
                                  return (
                                    <TouchableOpacity
                                      key={index2}
                                      onPress={() => {
                                        t_isSkip = SkipArr;
                                        t_isSkip[index1].contents[
                                          index2
                                        ].isSkip =
                                          !t_isSkip[index1].contents[index2]
                                            .isSkip;
                                        setSkipArr([...t_isSkip]);
                                      }}
                                    >
                                      <View
                                        style={
                                          SkipArr[index1].contents[index2]
                                            .isSkip
                                            ? styles.optionsSelected
                                            : styles.optionsView
                                        }
                                      >
                                        <Text
                                          style={
                                            SkipArr[index1].contents[index2]
                                              .isSkip
                                              ? styles.textSelected
                                              : styles.optionsText
                                          }
                                        >
                                          {String.fromCharCode(index1 + 65) +
                                            (index2 + 1)}
                                        </Text>
                                      </View>
                                    </TouchableOpacity>
                                  );
                                }
                              })}
                            </View>
                          ) : null}
                        </View>
                      );
                    })}
                  </View>
                </View>
              ) : null}
            </View>

            {/* <View style={{ marginLeft: 5 }}></View>
            <View
              style={{
                width: "100%",
                alignItems: "center",
              }}
            >
              <TouchableOpacity>
                <Text style={{ color: "#41C3EE" }}>添加跳过细节</Text>
              </TouchableOpacity>
            </View> */}
          </View>
          {t_skipType == 4 || t_skipType == 5 || t_skipType == 6 ? (
            <View>
              <View
                style={{
                  marginRight: 15,
                }}
              >
                <Text>关联题目</Text>
              </View>

              <View>
                {QuesData.body.map((item1, index1) => {
                  return (
                    <View key={index1}>
                      {!relationArr[index1].isSkip ? (
                        <View
                          style={{
                            flexDirection: "row",
                            flexWrap: "wrap",
                          }}
                        >
                          {item1.contents.map((item2, index2) => {
                            if (item2.type != 5) {
                              return (
                                <TouchableOpacity
                                  key={index2}
                                  onPress={() => {
                                    t_relation = relationArr;
                                    t_relation[index1].contents[index2].isSkip =
                                      !t_relation[index1].contents[index2]
                                        .isSkip;
                                    setRelationArr([...t_relation]);
                                  }}
                                >
                                  <View
                                    style={
                                      relationArr[index1].contents[index2]
                                        .isSkip
                                        ? styles.optionsSelected
                                        : styles.optionsView
                                    }
                                  >
                                    <Text
                                      style={
                                        relationArr[index1].contents[index2]
                                          .isSkip
                                          ? styles.textSelected
                                          : styles.optionsText
                                      }
                                    >
                                      {String.fromCharCode(index1 + 65) +
                                        (index2 + 1)}
                                    </Text>
                                  </View>
                                </TouchableOpacity>
                              );
                            }
                          })}
                        </View>
                      ) : null}
                    </View>
                  );
                })}
              </View>
            </View>
          ) : null}
        </View>
      </ScrollView>

      <View style={{ height: "7%" }}>
        <TouchableOpacity
          style={styles.submitBtn}
          onPress={() => {
            saveSkip();
          }}
        >
          <Text style={{ color: "#fff" }}>保存</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  borderView: {
    height: "100%",
    padding: 5,
    paddingLeft: "5%",
    paddingRight: "5%",
    justifyContent: "center",
  },
  submitBtn: {
    height: 42,
    // marginLeft: "3%",
    backgroundColor: "#41C3EE",
    alignItems: "center",
    padding: 10,
    borderRadius: 5,
  },
  optionView: {
    flexDirection: "row",
    marginBottom: 12,
    // alignItems: "center",
    marginLeft: 5,
    borderBottomColor: "#ddd",
    // borderBottomWidth: 1,
  },
  optionsView: {
    borderRadius: 14,
    marginTop: 5,
    padding: 4,
    paddingLeft: 10,
    paddingRight: 10,
    // backgroundColor: "#51bfe5",
    backgroundColor: "#fff",
    marginRight: 10,
    elevation: 4, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      // 设置阴影偏移量
      width: 0,
      height: 0,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.5, // 设置阴影的不透明度
    shadowColor: "gray", // 设置阴影色
  },
  optionsSelected: {
    borderRadius: 14,
    marginTop: 5,
    padding: 4,
    paddingLeft: 10,
    paddingRight: 10,
    marginRight: 10,
    backgroundColor: "#41C3EE",
  },
  textSelected: {
    color: "#fff",
  },
  optionsText: {
    color: "#000",
  },
});

export default SetSkip;
